<template>
  <div class="attendance-record-container">
    <van-nav-bar title="考勤记录" fixed placeholder left-arrow @click="handleBack" />
    <van-cell-group inset>
      <!-- 搜索栏 -->
      <van-field
        v-model="searchQuery"
        name="search"
        label="搜索"
        placeholder="请输入关键词搜索"
        type="text"
        :clearable="true"
        @input="handleSearch"
      />
      <div style="height: 32px; background-color: #f8f8f8;"></div>
      <!-- 考勤记录列表 -->
      <van-cell
        v-for="(item, index) in filteredRecords"
        :key="index"
        :title="formatType(item.attendanceType)"
        :value="formatTime(item.clockTime)"
        :value-class="statusClass(item.status)"
      >
        <template #extra>
          <van-tag :type="statusTagType(item.status)">
            {{ statusText(item.status) }}
          </van-tag>
        </template>
      </van-cell>
    </van-cell-group>
    <!-- 分页组件 -->
    <van-pagination
      v-if="totalPages > 1"
      :total="totalRecords"
      :page="currentPage"
      :page-size="pageSize"
      @change="handlePageChange"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { getAttendanceRecordsService} from '@/api/attendance' // 假设的接口函数，需根据实际情况实现
import { showToast } from 'vant'
import moment from'moment'
import {useRouter} from 'vue-router'
const router = useRouter()
// 搜索关键词
const searchQuery = ref('')
// 当前页码
const currentPage = ref(1)
// 每页显示记录数
const pageSize = ref(10)
// 总记录数
const totalRecords = ref(0)
// 总页数
const totalPages = ref(1)
// 考勤记录列表
const attendanceRecords = ref([])

// 格式化方法
const formatType = (type) => type === 0? '上班打卡' : '下班打卡'
const formatTime = (time) => moment(time).format('HH:mm:ss')

// 状态显示
const statusText = (status) => ['正常', '迟到', '早退', '缺勤', '请假', "未下班打卡"][status]
const statusTagType = (status) => status === 0? 'success' : 'danger'
const statusClass = (status) => ['status-normal', 'status-late', 'status-early'][status] || ''

// 计算属性，根据搜索关键词过滤记录
const filteredRecords = computed(() => {
  if (searchQuery.value === '') {
    return attendanceRecords.value
  }
  return attendanceRecords.value.filter((item) => {
    const typeText = formatType(item.attendanceType)
    const timeText = formatTime(item.clockTime)
    const statusTextValue = statusText(item.status)
    return (
      typeText.includes(searchQuery.value) ||
      timeText.includes(searchQuery.value) ||
      statusTextValue.includes(searchQuery.value)
    )
  })
})

// 获取考勤记录数据
const fetchAttendanceRecords = async () => {
   const res = await getAttendanceRecordsService(currentPage.value, pageSize.value)
   console.log(res);
   if (res.code === 0 && Array.isArray(res.data)) {
            attendanceRecords.value = res.data;
            // 假设后端没有直接返回 total 字段，这里简单将当前页数据量作为总记录数
            // 若后端能返回总记录数，需要调整此处逻辑
            totalRecords.value = res.data.length; 
            totalPages.value = Math.ceil(totalRecords.value / pageSize.value);
          }
}

// 处理页面切换
const handlePageChange = (page) => {
  currentPage.value = page
  fetchAttendanceRecords()
}

// 处理搜索输入
const handleSearch = () => {
  currentPage.value = 1
  fetchAttendanceRecords()
}

// 处理返回按钮点击
const handleBack = () => {
  // 这里根据实际情况实现返回逻辑，比如使用 Vue Router 进行页面跳转
  router.push('/workbenches')
  console.log('返回上一页')
}

onMounted(() => {
  fetchAttendanceRecords()
})
</script>

<style scoped>
.attendance-record-container {
  background: #f8f8f8;
  min-height: 100vh;
}

.status-normal {
  color: #07c160;
}

.status-late {
  color: #ee0a24;
}

.status-early {
  color: #ff976a;
}
</style>